<!--重写的公共input弹框插件模板 2021-8-24 by yf-->
<template>
  <div v-show="formData[key].isshow">
    <el-form-item
      :label="component.attrName"
      :id="key"
      :prop="key + '.value'"
      :required="formData[key].required.split(',').includes('empty')"
    >
      <div @click="clickHandler" class="click-wrap">
        <el-input
          v-model="formData[key].value"
          readonly
          class="hide"
        ></el-input>
        <el-input v-model="formData[key].text" readonly>
          <template slot="append">
            <a href="javascript:;">
              <i class="el-icon-more"></i>
            </a>
          </template>
        </el-input>
      </div>
    </el-form-item>
    <el-dialog
      :title="component.attrName"
      :visible.sync="show"
      width="70"
      :withHeader="false"
      class="m-dialog"
      append-to-body
    >
      <div v-loading="loading">
        <div class="empty" v-if="loading"></div>
        <template v-else>
          <content-list
            v-if="config.dialogType == 'LIST'"
            v-bind="$attrs"
            v-on="$listeners"
            :pageInfo="pageInfo"
            :content="config.dialogContent"
            @load="load"
            @getrow="getrow"
          ></content-list>
        </template>
        <content-tree
          v-if="config.dialogType == 'TREE'"
          v-bind="$attrs"
          v-on="$listeners"
          :content="config.dialogContent"
          @load="load"
          @getrow="getrow"
        ></content-tree>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ContentList from "./content-list.vue";
import ContentTree from "./content-tree.vue";
import http from "../../utils/http";
import { deepClone } from "../../utils/clone";
export default {
  name: "CommonDialogInput",
  components: {
    ContentList,
    ContentTree,
  },
  data() {
    return {
      config: {},
      show: false,
      currentValue: "",
      pageInfo: {
        total: 0,
        pageSize: 10,
        currentPage: 1,
      },
      loading: false,
    };
  },
  props: {
    component: {
      type: Object,
      default: () => {
        return {};
      },
    },
    formData: {
      type: Object,
    },
    ruleData: {
      type: Object,
    },
    actionValue: {
      type: String,
      default: "",
    },
    span: {
      type: Number || String,
      default: 16,
    },
  },
  computed: {
    key() {
      return this.component.pageTempStructId + "-" + this.component.attrId;
    },
  },
  created() {
    this.dialogInputConfig();
  },
  methods: {
    //根据component的参数动态加载业务相关的配置文件
    dialogInputConfig() {
      const configName = this.actionValue.split("|")[1];
      if (configName) {
        const config = require(`./config/${configName}.js`).default;
        this.config = deepClone(config);
      }
    },
    clickHandler() {
      this.load();
    },
    async load(filterData, page) {
      if (page) {
        this.pageInfo.currentPage = Number(page);
      }
      if (!filterData) {
        filterData = {};
      }
      const pageInfo = {
        pageSize: this.pageInfo.pageSize,
        pageIndex: this.pageInfo.currentPage,
      };
      const { url, paramsType, defaultParams, jsonParams, formKeyValues } =
        this.config.dialogContent.contentRequest;
      if (formKeyValues && formKeyValues.length > 0) {
        for (let i = 0; i < formKeyValues.length; i++) {
          let item = formKeyValues[i];
          if (
            this.formData[item.formKey] &&
            this.formData[item.formKey].value
          ) {
            if (item.join === "defaultParams") {
              defaultParams[item.paramName] = this.formData[item.formKey].value;
            }
            if (item.join === "jsonParams") {
              jsonParams[item.paramName] = this.formData[item.formKey].value;
            }
          } else {
            this.$message.warning(`请选填写${item.keyName}`);
            return;
          }
        }
      }
      let params = {};
      if (paramsType === "string") {
        let paramStr = "";
        Object.keys(jsonParams).forEach((key) => {
          paramStr += `${key}:${jsonParams[key]};`;
        });
        params = { ...defaultParams, paramStr, pageInfo };
      } else {
        params = { ...defaultParams, ...filterData, pageInfo };
      }
      this.show = true;
      this.loading = true;
      let res = await http({
        url: url,
        methods: "post",
        data: params,
      });
      if (res.code == 200) {
        const { meta } = res;
        if (meta.resList && meta.resList.executeSqlResps) {
          this.config.dialogContent.tableData = meta.resList.executeSqlResps;
          this.pageInfo.total = Number(meta.resList.pageInfo.rowCount);
        } else if (meta.resList && meta.resList.executeSqlResp) {
          this.config.dialogContent.tableData = meta.resList.executeSqlResp;
          this.pageInfo.total = Number(meta.resList.pageInfo.rowCount);
        } else if (meta.returnJson) {
          this.config.dialogContent.tableData = meta.returnJson;
        } else if (meta.returnObj) {
          this.config.dialogContent.tableData = meta.returnObj;
        }
      } else {
        this.$message.error("列表接口报错");
      }
      this.loading = false;
    },
    //搜素表单中的select的options选项，要求tableForm.items数组中如果有select,则排在数组的前面，
    // optionRequests 数组中对应的写select的options的请求地址及参数,且option的接口数据是：[{text,value}]
    async querySelectOptions() {
      if (!this.config.dialogContent.optionRequests.length) {
        return;
      }
      const requests = this.config.dialogContent.optionRequests.map((item) => {
        return http({ url: item.url, data: item.defaultParams });
      });
      const results = Promise.all(requests);
      this.$attrs.tableForm.items.forEach((item, i) => {
        if (item.itemRender.name == "$select") {
          item.itemRender.options = results[i].meta.returnJson;
        }
      });
    },
    getrow(row) {
      this.formData[this.key].value = row[this.config.dialogContent.submitKey];
      this.formData[this.key].text = row[this.config.dialogContent.showKey];
      this.$emit("input", row[this.config.dialogContent.submitKey]);
      this.$emit("getPluginValue", { value: row, key: this.key });
      this.show = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.hide {
  z-index: 0;
  visibility: hidden;
  width: 1px;
  position: absolute;
}
.empty {
  height: 80px;
}
.el-icon-more {
  font-size: 20px;
}
.click-wrap {
  ::v-deep .el-input-group--append .el-input__inner,
  .el-input-group__prepend {
    cursor: pointer;
  }
}
</style>

